<script setup lang="ts">
import type { BannerItem } from '../index'

interface Props {
  banners: BannerItem[]
}

defineProps<Props>()

const emit = defineEmits<{
  click: [item: BannerItem]
}>()

function handleBannerClick(item: BannerItem) {
  emit('click', item)
}
</script>

<template>
  <view class="px-4 py-2">
    <swiper
      class="h-40 overflow-hidden rounded-xl shadow-lg"
      indicator-dots
      autoplay
      circular
      indicator-active-color="#ffffff"
      indicator-color="rgba(255,255,255,0.3)"
    >
      <swiper-item
        v-for="item in banners"
        :key="item.id"
        class="h-full"
        @click="handleBannerClick(item)"
      >
        <image
          :src="item.image"
          mode="aspectFill"
          class="h-full w-full"
        />
        <view class="absolute bottom-0 left-0 right-0 from-black/50 to-transparent bg-gradient-to-t p-3">
          <text class="text-sm text-white font-medium">{{ item.title }}</text>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
